<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="false">
			<block slot="content">升级中心</block>
		</cu-custom>
		<block v-if="hasLogin">
			<block v-if="member">
				<block v-if="member.is_channel == 1">
					<view class="bg-white">
						<view class="space-between padding align-center" v-if="member">
							<view class="flex flex-start align-center">
								<view class="cu-avatar xl round default-bg">
									<image :src="member.head_portrait" mode="aspectFill"></image>
								</view>
								<view class="margin-left-sm">
									<view class="flex-start align-center">
										<text class=" text-lg">{{member.nickname}}</text>
										<view class="cu-tag bg-yellow round sm margin-left-sm text-sm level-v">
											<view class="cu-avatar round bg-yellow">
												<text class="cuIcon-selectionfill text-orange"></text>
											</view>
											<text class="padding-lr-xs">{{member.level.name}}</text>
										</view>
									</view>
									<text class="cu-tag sm margin-top-sm">
										{{member.province?member.province.title:''}} {{member.city?member.city.title:''}}
									</text>
									<!-- <view class="text-gray margin-top-xs">
										<view>邀请码：{{member.id}}<text class="cu-btn line-blue sm round margin-left-xs">复制</text></view>
									</view> -->
								</view>
							</view>
							<view class="text-right" style="min-width: 100rpx;">
								<!-- #ifdef MP-WEIXIN -->
								<button class="text-blue share-btn" open-type="share">邀请</button>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<view class="text-blue" @tap="showShare">邀请</view>
								<!-- #endif -->
							</view>
						</view>

						<view class="margin-lr">
							<view class="bg-yellow radius margin-lr padding-sm space-between align-center" @tap="goPage('/pages/channel/level')">
								<view>
									<text class="cuIcon cuIcon-selectionfill margin-right-sm text-orange"></text>
									<text class="level-tips">升级更高级别享受更高权益</text>
								</view>
								<text class="cu-btn round bg-brown sm">立即升级</text>
							</view>
						</view>
						<view class="bg-white shadow-warp margin-lr radius">
							<view class="cu-bar">
								<view class="action text-lg text-black text-bold">进货订单</view>
								<view class="action text-gray text-sm" @tap="goPage('/pages/shop/order/index?is_channel=1')">全部订单<text class="cuIcon cuIcon-right text-xs"></text></view>
							</view>
							<view class="grid col-4 bg-white padding-lr padding-bottom">
								<view class="text-center" @tap="goPage('/pages/shop/order/index?is_channel=1&status=1')">
									<view class="cu-avatar round lg bg-white">
										<view class="cu-tag absolute sm round tag bg-red text-white" v-if="order_synthesize_num[0] > 0">{{member.order_synthesize_num[0]}}</view>
										<image style="width: 70%; height: 70%;" src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/static/attract/daifuk.png"
										 mode="aspectFill"></image>
									</view>
									<view class="text-black margin-top-xs">待付款</view>
								</view>
								<view class="text-center" @tap="goPage('/pages/shop/order/index?is_channel=1&status=2')">
									<view class="cu-avatar  round lg bg-white">
										<view class="cu-tag absolute sm round tag bg-red text-white" v-if="order_synthesize_num[1] > 0">{{member.order_synthesize_num[1]}}</view>
										<image style="width: 70%; height: 70%;" src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/static/attract/daifahuo.png"
										 mode="aspectFill"></image>
									</view>
									<view class="text-black margin-top-xs">进行中</view>
								</view>
								<view class="text-center" @tap="goPage('/pages/shop/order/index?is_channel=1&status=3')">
									<view class="cu-avatar  round lg bg-white">
										<view class="cu-tag absolute sm round tag bg-red text-white" v-if="order_synthesize_num[2] > 0">{{member.order_synthesize_num[2]}}</view>
										<image style="width: 70%; height: 70%;" src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/static/attract/daishouhuo.png"
										 mode="aspectFill"></image>
									</view>
									<view class="text-black margin-top-xs">待发货</view>
								</view>
								<view class="text-center" @tap="goPage('/pages/shop/order/index?is_channel=1&status=4')">
									<view class="cu-avatar  round lg bg-white">
										<image style="width: 70%; height: 70%;" src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/static/attract/daishenhe.png"
										 mode="aspectFill"></image>
									</view>
									<view class="text-black margin-top-xs">已完成</view>
								</view>
							</view>
						</view>

						<view class="bg-white margin-lr padding-bottom">
							<view class="cu-bar">
								<view class="action text-lg text-black text-bold">常用应用</view>
							</view>
							<view class="cu-list grid col-3 no-border">
								<view class="cu-item" @tap="goPage('/pages/member/credit/index')">
									<view class="cu-avatar  bg-white">
										<image src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/static/attract/qudaoyongjin.png" mode="aspectFill"></image>
									</view>
									<view>渠道佣金</view>
								</view>
								<view class="cu-item" @tap="goPage('/pages/member/team/index')">
									<view class="cu-avatar  bg-white">
										<image src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/static/attract/qudaoyonghu.png" mode="aspectFill"></image>
									</view>
									<view>渠道团队</view>
								</view>
								<view class="cu-item" @tap="goPage('/pages/shop/category_channel')">
									<view class="cu-avatar  bg-white">
										<image src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/static/attract/qudaojinhuo.png" mode="aspectFill"></image>
									</view>
									<view>渠道进货</view>
								</view>
								<view class="cu-item" @tap="goPage('/pages/channel/region/index')">
									<view class="cu-avatar  bg-white">
										<image src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/static/attract/quyuguanli.png" mode="aspectFill"></image>
									</view>
									<view>区域管理</view>
								</view>
								<view class="cu-item" @tap="goPage('/pages/channel/apply_index')">
									<view class="cu-avatar  bg-white">
										<image src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/static/attract/baodanjindu.png" mode="aspectFill"></image>
									</view>
									<view>报单进度</view>
								</view>
								<view class="cu-item" @tap="goPage('/pages/member/appointment_rank')">
									<view class="cu-avatar  bg-white">
										<image src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/static/attract/yejipaiming.png" mode="aspectFill"></image>
									</view>
									<view>业绩排名</view>
								</view>
							</view>
						</view>
					</view>

				</block>
				<block v-else>
					<!-- <view class="bg-white padding" v-if="channel_content">
						<rich-text :nodes="channel_content"></rich-text>
					</view> -->
					<view v-if="apply" class="text-center margin-top">
						<view v-if="apply.examine_status==2">
							<view>驳回：{{apply.reason}}</view>
							<view class="cu-btn lg bg-blue round " @tap="goPage('/pages/channel/apply')">重新申请</view>
						</view>
						<view class="cu-btn lg bg-blue light round" v-else>
							申请中...
						</view>
					</view>
					<view class="text-center margin-top" v-else>
						<view class="cu-btn lg bg-blue round " @tap="goPage('/pages/channel/apply')">申请渠道</view>
					</view>
				</block>
			</block>
		</block>

		<shareView ref="shareView" type="member"></shareView>

		<Foot></Foot>
		<Navbar ref="navbar" PageCur="channel"></Navbar>
	</view>
</template>

<script>
	import shareView from '@/components/default/ShareViewH5.vue'
	import Navbar from '@/components/default/Navbar.vue'
	import Foot from '@/components/default/foot.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "channel",
		components: {
			shareView,
			Foot,
			Navbar
		},
		computed: mapState(['forcedLogin', 'hasLogin']),
		data() {
			return {
				member: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				modalName: null,
				order_synthesize_num: [0, 0, 0],
				channel_content: '',
				apply: null,
			}
		},
		onLoad(options) {
			if (this.$common.loginAuth(true)) {}
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member) => {
					this.member = member
					if (this.member.current_level > 1) {
						this.getStatistics()
						this.getChannelConfig()
					} else {
						this.getChannelConfig()
					}
				})
				this.theme = this.$config.THEME()
				if (this.$refs.navbar) this.$refs.navbar.updateset()

			}
		},
		methods: {
			getStatistics() {
				this.$http
					.get('order_statistics', {
						is_channel: 1
					})
					.then((response) => {
						this.order_synthesize_num = response.data.data
						console.log(response)
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getChannelConfig() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http
					.get('channel_setting')
					.then((response) => {
						console.log(response)
						this.channel_content = response.data.data.content
						this.apply = response.data.data.apply
						uni.hideLoading()
					})
					.catch((response) => {
						uni.hideLoading()
						console.log(response)
					})
			},
			showShare() {
				if (this.$common.loginAuth(true)) {
					this.$common.getMember().then((member) => {
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						});
						this.$refs.shareView.showModal({
							share_url: member.share_url
						}, member)
					})
				}
			},
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/channel/index'
			if (this.member) path += "?share_id=" + this.member.id
			return {
				title: this.$config.APP_NAME + '-渠道中心',
				imageUrl: '',
				path: path
			}
		},
	}
</script>

<style>
	.tag {
		right: 0;
		top: 0;
	}

	.level-tips {
		color: #874900;
	}

	.cu-list .cu-avatar {
		margin: 10rpx auto;
	}

	.level-v {
		padding-left: 0;
		background-color: #ffe967;
		color: #ed9917;

	}

	.level-v .cu-avatar {
		width: 50rpx;
		height: 50rpx;
		background-color: #ffe967;
	}

	.share-btn {
		padding: 0;
		line-height: unset;
		font-size: unset;
		background-color: unset;
	}

	.share-btn::after {
		content: unset;
	}
</style>
